<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { severityColorMap } from './config'
import HostTable from './components/HostTable.vue'
import { api } from '@/api'
import type { CveDetail } from '@/api/paths'
import PageWrapper from '@/components/PageWrapper.vue'

const { t } = useI18n()
const route = useRoute()

const isSpanning = ref(false)
// #region ----------------------------------------< detail >----------------------------------------
const cveId = ref()
const affectTableColumns = computed(() => [
  {
    dataIndex: 'os_version',
    key: 'os_version',
    title: t('vul.cveDetail.product'),
  },
  {
    dataIndex: 'package',
    key: 'package',
    title: t('vul.cveDetail.package'),
  },
])

const cveInfo = ref<CveDetail>({
  cve_id: '',
  cvss_score: '',
  description: '',
  package: [],
  publish_time: '',
  severity: '',
  related_cve: [],
})

async function queryCveDetail(cveId: string) {
  isSpanning.value = true
  const [, res] = await api.getCveInfos(cveId)
  if (res) cveInfo.value = res.result

  isSpanning.value = false
}

function initCveDetail(cveId: string) {
  if (!cveId) return

  queryCveDetail(cveId)
}
// #endregion

// #region ----------------------------------------< drawer >----------------------------------------

const isDrawerVisible = ref(false)

const drawerColumns = [
  {
    dataIndex: 'index',
    title: t('vul.cveDetail.index'),
  },
  {
    dataIndex: 'name',
    title: t('vul.cveDetail.cveName'),
  },
]
// #endregion

watch(
  () => route.path,
  () => {
    cveId.value = (route.params.cve_id as string) ?? ''
    initCveDetail(cveId.value)
  },
)

onMounted(() => {
  cveId.value = (route.params.cve_id as string) ?? ''
  initCveDetail(cveId.value)
})
</script>

<template>
  <PageWrapper>
    <a-card>
      <a-spin :spinning="isSpanning">
        <div class="cve-detail">
          <a-row>
            <a-col>
              <h1>{{ cveInfo.cve_id }}</h1>
            </a-col>
          </a-row>

          <a-row type="flex" justify="space-between">
            <a-col :span="8">
              {{ `${t('vul.cveDetail.publishTime')} : ${cveInfo.publish_time}` }}
            </a-col>
            <a-col v-if="cveInfo.severity" :span="8">
              {{ $t('vul.cveDetail.severity') }}
              <span :style="`color: ${severityColorMap[cveInfo.severity]}`">{{
                t(`vul.severityStatus.${cveInfo.severity.toLowerCase()}`)
              }}</span>
            </a-col>
          </a-row>

          <a-row type="flex" justify="space-between">
            <a-col :span="8">
              {{ `${t('vul.cves.cvssScore3')}:  ${cveInfo.cvss_score}` }}
            </a-col>
            <a-col :span="8">
              {{ $t('vul.cveDetail.associateCVE') }} :
              <span v-if="cveInfo.related_cve.length">
                <a @click="isDrawerVisible = true">
                  {{ cveInfo.related_cve.length }}
                </a>
                {{ $t('common.count') }}
              </span>
              <span v-else>{{ t('common.none') }}</span>
            </a-col>
            <a-drawer v-model:open="isDrawerVisible" :title="$t('vul.cveDetail.associateCVE')">
              <a-table
                :columns="drawerColumns"
                :data-source="cveInfo.related_cve.map((item, index) => ({ name: item, index }))"
                :pagination="false"
                bordered
              >
                <template #bodyCell="{ record, column }">
                  <template v-if="column.dataIndex === 'name'">
                    <router-link
                      :to="{ path: `/vulnerability/cves/cve-detail/${record.name}` }"
                      @click="isDrawerVisible = false"
                    >
                      {{ record.name }}
                    </router-link>
                  </template>
                </template>
              </a-table>
            </a-drawer>
          </a-row>

          <h4>{{ $t('vul.cveDetail.cveDesc') }}</h4>
          <p class="detail-description">
            {{ cveInfo.description }}
          </p>
          <h4>{{ $t('vul.cveDetail.affectedProduct') }}</h4>
          <a-table
            style="width: 600px"
            :columns="affectTableColumns"
            :data-source="cveInfo.package"
            :pagination="false"
          />
        </div>
      </a-spin>
    </a-card>
    <a-card>
      <h1>{{ $t('vul.cveDetail.affectedHost') }}</h1>
      <HostTable :key="cveId" class="host-table" />
    </a-card>
  </PageWrapper>
</template>

<style lang="less" scoped>
.cve-detail {
  padding: 12px 12px 12px 50px;
  h1 {
    margin: 0;
  }
  .ant-row {
    margin-bottom: 24px;
  }
}
.host-table {
  margin-top: 20px;
}
</style>
